<template>
  <div class="min-h-screen flex flex-col">
    <div class="flex flex-1">
      <div class="w-64 bg-gray-800 text-white h-screen sticky top-0">
        <div class="flex items-center justify-center h-16 border-b border-gray-700">
          <h1 class="text-xl font-bold">游戏管理后台</h1>
        </div>
        <nav class="px-4 py-6">
          <router-link to="/admin/games" class="flex items-center px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white rounded-md transition-colors mb-2">
            <i class="fa fa-gamepad mr-3"></i>
            <span>游戏管理</span>
          </router-link>
        </nav>
      </div>
      
      <div class="flex-1 bg-gray-50">
        <div class="h-16 bg-white shadow-sm sticky top-0 z-10">
          <div class="flex items-center justify-between h-full px-6">
            <div class="flex items-center">
              <button @click="$router.back()" class="text-gray-500 hover:text-gray-700 mr-4">
                <i class="fa fa-arrow-left"></i>
              </button>
              <h2 class="text-xl font-semibold text-gray-800">{{ pageTitle }}</h2>
            </div>
            <div class="flex items-center">
              <span class="mr-3 font-medium">{{ user.username }}</span>
              <button @click="logout" class="text-gray-500 hover:text-gray-700">
                <i class="fa fa-sign-out"></i>
              </button>
            </div>
          </div>
        </div>
        
        <div class="p-6">
          <router-view :pageTitle="pageTitle" @update:pageTitle="updatePageTitle"></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: JSON.parse(localStorage.getItem('user') || '{}'),
      pageTitle: '游戏管理'
    };
  },
  methods: {
    logout() {
      localStorage.removeItem('token');
      localStorage.removeItem('user');
      this.$router.push({ name: 'Login' });
    },
    updatePageTitle(title) {
      this.pageTitle = title;
    }
  }
};
</script>  